import React, {Component} from 'react';
import {axiosGetFunction} from "../../MyConfig/AppConfig";

class SelfMadeImgComponentBox extends Component {

    state = {
        img_component_list: []
    }

    componentDidMount() {
        // 加载自己的组件
        let userIdStr = localStorage.getItem("userInfo:id")
        if (userIdStr){
            axiosGetFunction(
                "/img_component/mine?user_id="+userIdStr,
                (received_data)=>{
                    console.log("received_data", received_data)
                    this.setState({
                        img_component_list: received_data
                    }, ()=>{
                        // received_data.map((item)=>{
                        //     let img_obj = new Image();
                        //     img_obj.src = item.img_url;
                        //     // img_obj.onload = () => {
                        //     //     let canvas = document.createElement('canvas'),
                        //     //         width = img_obj.width,
                        //     //         height = img_obj.height;
                        //     //     canvas.width = width;
                        //     //     canvas.height = height;
                        //     //     canvas.getContext('2d').drawImage(img_obj, 0, 0, width, height);
                        //     // }
                        // })
                    })
                }
            )
        }
    }

    onDrag = (event, image) => {
        console.log("onDrag", image)
        event.dataTransfer.setData(
            'Text',
            JSON.stringify({
                name: 'image',
                rect: {
                    width: 100,
                    height: 100
                },
                image
            })
        );
    };

    render() {
        let { img_component_list } = this.state;
        return (
            <div>
                This is SelfMadeImgComponentBox
                {
                    img_component_list.map((item)=>(
                        <a
                            key={item.title}
                            title={item.title}
                            draggable
                            href="/#"
                            onDragStart={(ev) => this.onDrag(ev, item.img_url)}
                        >
                            <img
                                style={{height: 80, width: 80, margin: '0 1px'}}
                                src={item.img_url}
                                alt="pic"
                            />
                        </a>
                    ))
                }
            </div>
        );
    }
}

export default SelfMadeImgComponentBox;
